<template>
  <div id="wrapper">
    <navigation></navigation>
    <div id="page-wrapper">
      <div class="row container-fluid">
        <div class="col-md-1 btn-group openssh-btn">
          <button type="button" class="btn btn-success" @click="createHost" data-toggle="modal"
                  data-whatever="@getbootstrap">新建设备
          </button>
        </div>
        <div class="modal fade" id="createHost" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
          <div class="modal-dialog" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                  aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title" id="createHostLabel">创建设备</h4>
                <form @submit.prevent="submit">
                  <input type="hidden" v-model="host.id" id="id"/>
                  <div class="form-group">
                    <label for="ip">IP地址</label>
                    <input class="form-control" v-model="host.ip" id="ip" placeholder="IP地址">
                  </div>
                  <div class="form-group">
                    <label for="port">端口</label>
                    <input type="number" class="form-control" v-model="host.port" id="port" placeholder="端口">
                  </div>
                  <div class="form-group">
                    <label for="name">设备名</label>
                    <input type="text" class="form-control" id="name" v-model="host.name" placeholder="设备名">
                  </div>
                  <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" v-model="host.username" placeholder="用户名">
                  </div>
                  <div class="form-group">
                    <label for="password">密码</label>
                    <input type="text" class="form-control" v-model="host.passwd" id="password" placeholder="密码">
                  </div>
                  <div class="form-group">
                    <label for="password">密钥文件</label>
                    <input type="file" class="form-control" @change="uploadFile" id="file">
                  </div>

                  <div class="modal-footer">
                    <input type="button" class="btn btn-primary" @click="submit" value="提交">
                  </div>
                </form>
              </div>
            </div>
          </div>
        </div>
        <table width="100%"
               class="table table-striped table-bordered table-hover dataTable no-footer dtr-inline col-md-12"
               id="dataTables-example" role="grid" aria-describedby="dataTables-example_info" style="width: 100%;">
          <thead>
          <tr role="row">
            <th class="sorting_asc" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-sort="ascending" aria-label="Rendering engine: activate to sort column descending"
                style="width: 284px;">设备名称
            </th>
            <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-label="Browser: activate to sort column ascending" style="width: 340px;">IP
            </th>
            <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-label="Platform(s): activate to sort column ascending" style="width: 313px;">端口
            </th>
            <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-label="Platform(s): activate to sort column ascending" style="width: 313px;">密钥文件
            </th>
            <th class="sorting" tabindex="0" aria-controls="dataTables-example" rowspan="1" colspan="1"
                aria-label="Platform(s): activate to sort column ascending" style="width: 313px;">操作
            </th>
          </tr>
          </thead>
          <tbody>
          <tr class="gradeA even" role="row" v-for="host in getHostlist" :key="host.id">
            <td class="sorting_1">{{ host.name }}</td>
            <td>{{ host.ip }}</td>
            <td>{{ host.port }}</td>
            <td>{{ host.key_file }}</td>
            <td><a @click="updateForm(host)">修改</a>|<a @click="delelte(host.id)">删除</a>|
            </td>
          </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
  import {mapGetters} from 'vuex'
  import api from '../api/host'
  import Navigation from './Navigation'

  function selectModal(state) {
    $('#createHost').modal(state)
  }

  var model = {
    ip: '',
    port: '',
    name: '',
    username: '',
    passwd: '',
    key_file: ''
  };
  export default {
    name: 'Host',
    data() {
      return {
        host: model
      }
    },
    created() {
      this.$store.dispatch("getIndexHosts")
    },
    computed: {
      ...mapGetters({
        getHostlist: 'allHostsList'
      })
    },
    methods: {
      uploadFile(e) {
        var files = e.target.files || e.dataTransfer.files;
        if (!files.length)
          return;
        let file = e.target.files[0];
        api.uploadFileApi(file,res=>{
          if(res.data.status){
            this.host.key_file = res.data.response
          }else {
            alert("上传文件错误")
          }
        });
      },
      submit() {
        api.postHost(this.host, res => {
          this.$store.dispatch("createHostUpdateIndex", res.response)
          selectModal('hide')
        })
      },
      createHost() {
        this.host = model;
        selectModal("show");
      },
      delelte(id) {
        api.delete(id);
        this.$store.dispatch("deleteHostUpdateIndex", id)
      },
      updateForm(host) {
        this.host = host;
        selectModal('show')
      },
    }
  }
</script>
<style lang="less" rel="stylesheet/less">
  .openssh-btn {
    margin: 20px 0px;
  }
</style>
